import axios from 'axios'
import './work.scss'
import { Card, Tag } from 'antd'
import { useEffect, useState } from 'react'
import { getTime } from '@/utils/time'
import SvgIcon from '@/components/SvgIcon'
import * as echarts from 'echarts'

function Work() {
  const [weather, setWeather] = useState<any>({
    day_weather: '晴天',
    min_degree: '28',
    max_degree: '34',
  })

  const getWeather = async () => {
    const res = await axios.get('https://api.oioweb.cn/api/weather/GetWeather')
    setWeather(res.data.result.condition)
  }

  useEffect(() => {
    getWeather()

    const chartDom = document.getElementById('main')
    if (chartDom) {
      const myChart = echarts.init(chartDom)
      let option: any = null

      option = {
        xAxis: {
          type: 'category',
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月',
          ],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [1906, 1834, 1542, 1630, 2024, 2423, 1872, 1280, 1498, 1977, 1842, 2030],
            type: 'bar',
          },
        ],
      }

      option && myChart.setOption(option)
    } else {
      console.error('Chart DOM element not found')
    }
  }, [])

  return (
    <div className="Work">
      <Card>
        <div className="work-top">
          <img className="top-img" src="/assets/images/header.jpg" alt="" />
          <div>
            <p>{getTime()}好，WBY，开始您一天的工作吧！</p>
            <p>
              今日{weather.day_weather}，{weather.min_degree}℃ -{weather.max_degree}℃
            </p>
          </div>
        </div>
      </Card>
      <div className="analyse">
        <Card title="大模型功能使用数" extra={<Tag color="success">月</Tag>}>
          <div className="card-content">
            <span>№:14730</span>
            <SvgIcon name="ai" size="50" />
          </div>
        </Card>
        <Card title="文本功能使用数" extra={<Tag color="processing">月</Tag>}>
          <div className="card-content">
            <span>№:8732</span>
            <SvgIcon name="text" size="50" />
          </div>
        </Card>
        <Card title="选课功能使用数" extra={<Tag color="warning">月</Tag>}>
          <div className="card-content">
            <span>№:6848</span>
            <SvgIcon name="selectClass" size="50" />
          </div>
        </Card>
        <Card title="面试功能使用数" extra={<Tag color="purple">月</Tag>}>
          <div className="card-content">
            <span>№:7723</span>
            <SvgIcon name="interview" size="50" />
          </div>
        </Card>
      </div>
      <Card className="chart" title="访问量">
        <div id="main" style={{ width: '100%', height: '400px' }} className="main"></div>
      </Card>
    </div>
  )
}

export default Work
